<template>
    <div class="login">
       <el-form ref="form" :model="form" class="container" :rules="rules">
            <el-form-item prop="username">
        
            <div class="avatar">
                <img src="../assets/avatar.jpg" alt="">
            </div>
            <el-input v-model="form.username" placeholder="账户" prefix-icon="myicon myicon-user"></el-input>
            </el-form-item>
             <el-form-item prop="password">
            <el-input v-model="form.password" placeholder="密码" prefix-icon="myicon myicon-key" type="password"></el-input>
            </el-form-item>
            <el-button type="primary" class="login-btn" @click="loginSubmit">登录</el-button>
        </el-form>    
    </div> 
</template>

<script>
//按需导入
import {checkUser} from '../api/index.js'
    export default{
        data(){
            return{
               form:{
                   username:'',
                   password:''
               },
               rules:{
                   username:[
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                   ],
                   password:[
                        { required: true, message: '请输入密码', trigger: 'blur' }
                   ]
               }
            }
           
        },
        methods:{
          loginSubmit(){
              //提交校验 this.$refs.form通过ref属性获取表单元素,validata是element-ui给我们提供的方法
              this.$refs.form.validate((valid)=>{
                  //如果校验成功就执行下面函数
                  if(valid){
                    checkUser(this.form).then(res=>{
                        // 如果请求数据成功，判断一下状态，是否登陆成功
                        if(res.meta.status === 200){
                            // console.log(res)
                            //如果成功就跳转至首页,通过编程式导航进行跳转
                            this.$router.push('/')
                            // 解决浏览器无状态特点，使用token将token保存到localStorage中
                            localStorage.setItem('mytoken',res.data.token)
                        }else{
                            console.log(res)
                            // 如果不成功，给用户提示信息
                            this.$message({
                            message: res.meta.msg,
                            center: true
                            });
                        }
                    })
                  }else{
                      console.log('校验不通过')
                  }
              })
          }
        }
    }
</script>
<style lang="scss" scoped>
    .login {
       position: fixed;
       width: 100%;
       height: 100%;
       background-color: #2f4050;

    .container {
        position: absolute;
        left: 0;
        right: 0;
        width: 400px;
        padding: 0px 40px 15px 40px;
        margin: 200px auto;
        background: white;
    .avatar {
        position: relative;
        left: 50%;
        width: 120px;
        height: 120px;
        margin-left: -60px;
        margin-top: -60px;
        box-sizing: border-box;
        border-radius: 50%;
        border: 10px solid #fff;
        box-shadow: 0 1px 5px #ccc;
        overflow: hidden;
        
    }
    .login-btn {
       width: 100%;
    }
  }
}
</style>